<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>批量导出 - 食物食材食品基本信息Web系统</title>
  <link rel="stylesheet" href="css/style.css">
  <script>
    if (!sessionStorage.getItem('isLoggedIn')) {
      window.location.href = 'login.html';
    }
  </script>
  <style>
    .export-section { background: #fff; border-radius: 8px; padding: 20px; margin: 20px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .export-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0; }
    .export-card { border: 2px solid #e0e0e0; border-radius: 8px; padding: 20px; text-align: center; transition: all 0.3s; }
    .export-card:hover { border-color: #388e3c; transform: translateY(-2px); }
    .export-card h3 { color: #388e3c; margin-bottom: 10px; }
    .export-card p { color: #666; margin-bottom: 15px; }
    .export-btn { width: 100%; padding: 12px; font-size: 16px; }
    .export-status { margin-top: 10px; padding: 10px; border-radius: 5px; display: none; }
    .status-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
    .status-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    .status-loading { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
  </style>
</head>
<body>
  <div class="bg"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <header>
    <h1>食物食材食品基本信息Web系统</h1>
    <nav>
      <div class="user-menu" id="userMenu">
        <img src="img/avatar.png" alt="头像" class="avatar" id="userAvatar">
        <span class="username" id="usernameDisplay">用户</span>
        <span class="dropdown-arrow">&#9662;</span>
        <div class="dropdown-menu" id="dropdownMenu">
          <a href="#" id="profileLink"><span class="menu-icon">&#8962;</span> 个人空间</a>
          <a href="login.html" id="logout"><span class="menu-icon">&#9906;</span> 退出登录</a>
        </div>
      </div>
    </nav>
  </header>
  <main>
    <a href="index.html" class="back-home-btn"><span>返回首页</span></a>
    <section>
      <h2>批量导出</h2>
      <p>导出系统中的所有数据为Excel文件，支持按表类型分别导出。</p>
      
      <div class="export-section">
        <h3>选择导出内容</h3>
        <div class="export-grid">
          <div class="export-card">
            <h3>食物数据</h3>
            <p>导出所有食物基本信息，包含名称、产地、生产单位、出产季节等</p>
            <button class="btn btn-primary export-btn" onclick="exportData('foods')">导出食物数据</button>
            <div class="export-status" id="foods-status"></div>
          </div>
          
          <div class="export-card">
            <h3>食材数据</h3>
            <p>导出所有食材信息，包含名称、分类、产地、价格、供货商等</p>
            <button class="btn btn-primary export-btn" onclick="exportData('ingredients')">导出食材数据</button>
            <div class="export-status" id="ingredients-status"></div>
          </div>
          
          <div class="export-card">
            <h3>食品数据</h3>
            <p>导出所有食品信息，包含名称、成分、制作方法、功效等</p>
            <button class="btn btn-primary export-btn" onclick="exportData('products')">导出食品数据</button>
            <div class="export-status" id="products-status"></div>
          </div>
          
          <div class="export-card">
            <h3>建议数据</h3>
            <p>导出所有用户建议，包含建议内容、类型、状态等</p>
            <button class="btn btn-primary export-btn" onclick="exportData('suggestions')">导出建议数据</button>
            <div class="export-status" id="suggestions-status"></div>
          </div>
        </div>
      </div>
      
      <div class="export-section">
        <h3>批量导出</h3>
        <p>一次性导出所有数据表</p>
        <button class="btn btn-success" style="font-size: 18px; padding: 15px 30px;" onclick="exportAllData()">导出所有数据</button>
        <div class="export-status" id="all-status"></div>
      </div>
      
      <div class="export-section">
        <h3>导出说明</h3>
        <ul>
          <li>导出的Excel文件包含完整的数据信息</li>
          <li>图片文件会以文件名形式显示在Excel中</li>
          <li>支持中文表头，便于查看和使用</li>
          <li>文件会自动下载到您的本地计算机</li>
          <li>大量数据导出可能需要较长时间，请耐心等待</li>
        </ul>
      </div>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 食物食材食品基本信息Web系统</p>
  </footer>
  <script src="js/user_menu.js"></script>
  <script>
    function exportData(tableType) {
      const statusElement = document.getElementById(tableType + '-status');
      statusElement.style.display = 'block';
      statusElement.className = 'export-status status-loading';
      statusElement.textContent = '正在导出...';
      
      fetch(`http://localhost:3000/api/backup/${tableType}`, {
        headers: {
          'Authorization': sessionStorage.getItem('token') || ''
        }
      })
      .then(response => {
        if (response.ok) {
          return response.blob();
        } else {
          throw new Error('导出失败');
        }
      })
      .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${tableType}_${new Date().toISOString().split('T')[0]}.xlsx`;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
        
        statusElement.className = 'export-status status-success';
        statusElement.textContent = '导出成功！';
        
        setTimeout(() => {
          statusElement.style.display = 'none';
        }, 3000);
      })
      .catch(error => {
        statusElement.className = 'export-status status-error';
        statusElement.textContent = '导出失败：' + error.message;
        
        setTimeout(() => {
          statusElement.style.display = 'none';
        }, 5000);
      });
    }
    
    function exportAllData() {
      const statusElement = document.getElementById('all-status');
      statusElement.style.display = 'block';
      statusElement.className = 'export-status status-loading';
      statusElement.textContent = '正在导出所有数据...';
      
      const tables = ['foods', 'ingredients', 'products'];
      let completed = 0;
      let failed = 0;
      
      tables.forEach(table => {
        fetch(`http://localhost:3000/api/backup/${table}`, {
          headers: {
            'Authorization': sessionStorage.getItem('token') || ''
          }
        })
        .then(response => {
          if (response.ok) {
            return response.blob();
          } else {
            throw new Error(`${table}导出失败`);
          }
        })
        .then(blob => {
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = `${table}_${new Date().toISOString().split('T')[0]}.xlsx`;
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);
          completed++;
        })
        .catch(error => {
          failed++;
          console.error(error);
        })
        .finally(() => {
          if (completed + failed === tables.length) {
            if (failed === 0) {
              statusElement.className = 'export-status status-success';
              statusElement.textContent = `导出完成！成功导出${completed}个文件`;
            } else {
              statusElement.className = 'export-status status-error';
              statusElement.textContent = `导出完成！成功${completed}个，失败${failed}个`;
            }
            
            setTimeout(() => {
              statusElement.style.display = 'none';
            }, 5000);
          }
        });
      });
    }
  </script>
</body>
</html> 